<template>
  <el-dialog :visible.sync="isShow" v-if="isShow" :append-to-body="true" title="信息详情" width="80%" :before-close="handleClose" top="100px" :close-on-click-modal="false">
    <div class="flexStart">
      <div class="infoBox width25">
        <p>个人信息</p>
        <div class="info flex" v-for="(item,index) in userData" :key="index">
          <div class="width50">{{ item.label }}</div>
          <!-- <div class="leftBorder width50 text-cut" v-show="item.key!='reg_machine'">{{ item.key=='agent_id'?'【'+item.value+'】'+$public.channelLabel(item.value):item.value!=''?item.value:'--' }}</div> -->
          <div class="leftBorder width50 text-cut" v-show="item.key!='reg_machine'">{{ item.key=='agent_id'?'【'+item.value+'】'+$public.channelLabel(item.value):item.value }}</div>
          <div class="leftBorder width50 text-cut item_details" :class="item.key=='reg_machine' && item.value?'marginB2':''" style="color:cornflowerblue;margin-bottom:2px;" v-show="item.key=='reg_machine' && item.value" @click="mobileDetails">{{ item.value }}</div>
          <div class="leftBorder width50 text-cut" v-show="item.key=='reg_machine' && !item.value">--</div>
        </div>
      </div>
      <div class="infoBox width23">
        <p>业绩数据</p>
        <div class="info flex" v-for="(item,index) in performanceData" :key="index">
          <div class="width50">{{ item.label }}</div>
          <div class="leftBorder width50">{{ item.value }}</div>
        </div>
      </div>
      <div class="infoBox width29">
        <p>银行卡信息</p>
        <div class="info flex" v-for="(item,index) in bankData" :key="index">
          <div class="width40">{{ item.label }} <span :class="item.pass?'mustPass':'noMustPass'">*</span> </div>
          <div class="leftBorder width50" style="padding:0;height:45px;padding-top:2px">
            <el-input type="text" v-model="item.value" clearable :placeholder="`请输入${item.label}`" style="width:120%"/>
          </div>
        </div>
      </div>
      <div style="width:25%">
        <div class="infoBox width100 marginB20">
          <p>今日数据</p>
          <div class="info flex" v-for="(item,index) in todayData" :key="index">
            <div class="width50">
              <span style="font-size:12px">{{ item.label }}</span>
            </div>
            <div class="leftBorder width50">{{ item.value }}</div>
          </div>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="medium" @click="handleClose">取 消</el-button>
      <el-button size="medium" type="primary" @click="handleConfirm()">确 认</el-button>
    </span>
    <mobile-details :show="isShowMobileDetails" :data="checkedItem" @onHideDetails="onClose" />
  </el-dialog>
</template>

<script>
import { 
  getDetails
 } from "@/api/agent";
 import { 
  playerBankCard
 } from "@/api/player";
import MobileDetails from './mobile-details'
export default {
  components: {
    MobileDetails
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: function () {
        return {}
      }
    },
  },
  data () {
    return {
      isShow: false,
      formParams:{},
      checkedItem:null,
      isShowMobileDetails:false,
      userData:[
        {label:'用户ID',key:'id',value:''},
        {label:'昵称',key:'nick_name',value:''},
        {label:'上级ID',key:'parent_id',value:''},
        {label:'已领佣金',key:'get_commission',value:''},
        {label:'剩余可领佣金',key:'can_get_commission',value:''},
        {label:'可提现金额',key:'can_cash_money',value:''},
        {label:'历史总佣金',key:'total_commission',value:''},
        {label:'历史存款（历史取款）',key:'total_money',value:''},
        {label:'总下注',key:'total_bet_money',value:''},
        {label:'剩余卢比',key:'residue_money',value:''},
        {label:'奖金',key:'bonus_money',value:''},
        {label:'可转换货币',key:'convert_money',value:''},
        {label:'首充金额',key:'first_pay_money',value:''},
        {label:'注册渠道',key:'agent_id',value:''},
        {label:'VIP等级',key:'vip_level',value:''},
        {label:'注册时间',key:'created_at',value:''},
        {label:'注册IP',key:'reg_ip',value:''},
        {label:'注册设备',key:'reg_machine',value:''},
      ],
      performanceData:[
        {label:'邀请人数',key:'invite_num',value:''},
        {label:'有效邀请人数',key:'invitees_num_valid',value:''},
        {label:'今日新增邀请',key:'todayInviteNum',value:''},
        {label:'邀请返利',key:'invitees_cashback',value:''},
        {label:'今日佣金',key:'todayCommission',value:''},
        {label:'本周佣金',key:'weekCommission',value:''},
        {label:'本月佣金',key:'monthCommission',value:''},
      ],
      todayData:[
        {label:'今日充值金额',key:'today_pay_money',value:''},
        {label:'今日提现金额',key:'withdrawal_today',value:''},
        {label:'今日代理下注',key:'today_agent_water',value:''},
        {label:'一级代理(人数/返佣/下注)',key:'one_agent',value:''},
        {label:'二级代理(人数/返佣/下注)',key:'two_agent',value:''},
        {label:'三级代理(人数/返佣/下注)',key:'three_agent',value:''},
      ],
      bankData:[
        {label:'银行卡号',key:'account',value:'',pass:true},
        {label:'银行名称',key:'bank_name',value:'',pass:true},
        {label:'分行名称',key:'bank_sub_name',value:''},
        {label:'电话',key:'mobile',value:'',pass:true},
        {label:'用户名',key:'bank_card_user_name',value:'',pass:true},
        {label:'IFSC守则',key:'ifsc_code',value:'',pass:true},
        {label:'PAN号',key:'pan_no',value:''},
        {label:'Aadhaar号',key:'aadhaar_no',value:''},
      ],
    }
  },
  computed: {},
  watch: {
    show: function () {
      let that = this;
      that.isShow = that.show
      if (that.data) {
        if(that.data.user_bank_info){
          that.formParams = JSON.parse(JSON.stringify(that.data.user_bank_info))
          that.getDetailsList(that.data.id)
        }else if(that.data.user_id){
          that.getDetailsList(that.data.user_id)
        }
      } else {
        that.formParams = {}
      }
    },
  },
  mounted () {},
  methods: {
    // 获取领取记录
    getDetailsList (id) {
      let that = this;
      that.listLoading = true;
      getDetails({user_id:id}).then(function (res) {
        if (res.data) {
          // 用户信息
          for (const key in res.data.userInfo) {
            // 金额
            if(key=='get_commission' || key=='can_get_commission' || key=='can_cash_money' || key=='no_cash_money' || key=='total_commission' || key=='total_bet_money' || key=='residue_money' || key=='bonus_money' || key=='convert_money' || key=='first_pay_money' || key=='recharge_total'|| key=='withdrawal_total'){
              res.data.userInfo[key]=that.$public.mathNumberDivideWan(res.data.userInfo[key])
            }
            that.userData.forEach(item=>{
              if(item.key=='agent_id' || item.key=='vip_level' || item.key=='created_at' || item.key=='reg_ip' || item.key=='reg_machine'){
                item.value=res.data.userInfo.user_data[item.key]
              }
              if(key==item.key){
                item.value=res.data.userInfo[key]
              }
              // 历史存款（历史取款）
              if(item.key=='total_money'){
                item.value=res.data.userInfo['recharge_total']+'/'+res.data.userInfo['withdrawal_total']
              }
              // 剩余卢比 = 可提现卢比 + 不可提现卢比
              if(item.key=='residue_money'){
                item.value=that.$public.mathNumberAddition(res.data.userInfo['can_cash_money'],res.data.userInfo['no_cash_money'])
              }
            })
          }
          // 银行卡信息
          for (const key in res.data.userInfo.bank_info) {
            that.bankData.forEach(item=>{
              if(key==item.key){
                item.value=res.data.userInfo.bank_info[key]
                if(item.key=='mobile' && !res.data.userInfo.bank_info['mobile'] && res.data.userInfo['mobile']){
                  item.value=res.data.userInfo['mobile']
                }
              }
            })
          }
          // 业绩数据
          for (const key in res.data.achievementDataInfo) {
            that.performanceData.forEach(item=>{
              if(key==item.key){
                if(key!='invite_num' && key!='invitees_num_valid' && key!='todayInviteNum'){
                  item.value=that.$public.mathNumberDivideWan(res.data.achievementDataInfo[key])
                }else{
                  item.value=res.data.achievementDataInfo[key]
                }
              }
            })
          }
          // 今日数据
          for (const key in res.data.todayDataInfo) {
            if(key!='one_agent_person' && key!='two_agent_person' && key!='three_agent_person'){
              res.data.todayDataInfo[key]=that.$public.mathNumberDivideWan(res.data.todayDataInfo[key])
            }
            that.todayData.forEach(item=>{
              if(key==item.key){
                item.value=res.data.todayDataInfo[key]
              }
              if(item.key == 'withdrawal_today'){
                item.value=that.$public.mathNumberDivideWan(res.data.userGoldInfo[item.key])
              }
              if(item.key=='one_agent'){
                item.value=res.data.todayDataInfo['one_agent_person']+'/'+res.data.todayDataInfo['one_agent_commission']+'/'+res.data.todayDataInfo['one_agent_water']
              }
              if(item.key=='two_agent'){
                item.value=res.data.todayDataInfo['two_agent_person']+'/'+res.data.todayDataInfo['two_agent_commission']+'/'+res.data.todayDataInfo['two_agent_water']
              }
              if(item.key=='three_agent'){
                item.value=res.data.todayDataInfo['three_agent_person']+'/'+res.data.todayDataInfo['three_agent_commission']+'/'+res.data.todayDataInfo['three_agent_water']
              }
            })
          }
        }
        that.listLoading = false;
      })
      .catch((error) => {
        that.listLoading = false;
        that.$message.error(error.msg);
      });
    },
    // 设备信息
    mobileDetails(){
      let that = this;
      that.checkedItem={
        id:that.userData[0].value
      }
      that.isShowMobileDetails=true
    },
    handleConfirm () {
      let that = this,params=JSON.parse(JSON.stringify(that.formParams));
      if(!params.user_id){
        params.user_id=that.userData[0].value
      }
      that.bankData.map(item=>{
        params[item.key]=item.value || ''
      })
      if(!params.account){
        return that.$message.error('请输入银行卡')
      }
      if(!params.bank_name){
        return that.$message.error('请输入银行名称')
      }
      if(!params.mobile){
        return that.$message.error('请输入移动电话')
      }else{
        if(params.mobile.length>10){
          return that.$message.error('请输入正确的移动电话格式')
        }
      }
      if(!params.bank_card_user_name){
        return that.$message.error('请输入用户名')
      }
      let reg = /^[A-Za-z]{4}0[A-Za-z0-9]{6}$/; // IFSC正则
      if(!params.ifsc_code){
        return that.$message.error('请输入IFSC')
      }else if (!reg.test(params.ifsc_code)) {
        return that.$message.error('请输入正确的IFSC格式')
      }
      playerBankCard(params).then(function (res) {
        that.$message.success(res.msg)
        that.$emit('onHideDetails', true)
      }).catch((error) => {
        that.$message.error(error.msg)
      })
    },
    // 取消
    onClose(){
      this.isShowMobileDetails=false
    },
    handleClose () {
      this.$emit('onHideDetails', false)
    },
  }
}
</script>

<style scoped lang="scss">
.width23{
  width: 23%;
  margin: 5px;
  border: 1px solid #999999;
}
.width25{
  margin: 5px;
  border: 1px solid #999999;
}
.width29{
  width: 29%;
  margin: 5px;
  border: 1px solid #999999;
}
.width100{
  margin: 5px;
  border: 1px solid #999999;
}
.marginB2{
  margin-bottom: 2px;
}
.infoBox{
  color: #333;
  font-size: 15px;
  text-align: center;
  p{
    font-size: 18px;
    font-weight: 600;
  }
  .info{
    border-top:1px solid #999999;
    div{
      height: 33px;
      line-height: 33px;
      padding-left: 5px;
    }
    .leftBorder{
      color: #000;
      border-left:1px solid #999999;
      font-weight: 550;
    }
  }
}
</style>